// jsx 和 非 jsx 语法的比较

// 1. 负责创建虚拟 dom
import React from "react";

// 2. 负责虚拟 dom 渲染到页面
import ReactDOM from "react-dom/client";
/**
 * 3. 在React中可以使用React.createElement方法创建虚拟DOM -------------非jsx 语法 和下方等价----------------
 *
 * 也可以认为React.createElement是创建虚拟DOM工厂
 *
 * 它的返回值才是React元素，也是虚拟DOM
 */
const element = React.createElement(
  "div", //DOM的类型
  {
    //DOM的属性
    style: { color: "red" }, //行内样式
    className: "container", //类名
  },
  "hello",
  React.createElement(
    "span", //DOM的类型
    { style: { color: "blue" } }, //行内属性
    "world" //儿子
  )
);

// 7. root代表要渲染的目标容器
const root1 = ReactDOM.createRoot(document.getElementById("root"));
// 8. 要把哪个React元素，也就是虚拟DOM渲染到容器中
root1.render(element);

// jsx 语法 和上方等价 --------------------------------------------

// 4. 如果要想在JSX中读取JS变量，可以使用表达式

let context = "hello";

let jsxElement = (
  <div style={{ color: "red" }} className="container">
    {context}
    <span style={{ color: "blue" }}>world</span>
  </div>
);

// 5. jxs 还可以作为函数的参数，还可以作为函数的返回值

function Functioncomponent() {
  return <div></div>;
}

// 6. 可以进行循环迭代

const names = ["A", "B", "C"];

let jsxElement1 = (
  <ul>
    {names.map((name) => (
      <li>{name}</li>
    ))}
  </ul>
);

// 7. root代表要渲染的目标容器

const root = ReactDOM.createRoot(document.getElementById("root"));

// 8. 要把哪个React元素，也就是虚拟DOM渲染到容器中

root.render(jsxElement);
